@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
html{
    font-size: 40px;
}
.web{
    width: 100%;
    padding-bottom: r(114);
    >.top{
        width: 100%;
        height: r(75);
        border-bottom: 1px solid #a7a7a7;
        >ul{
            display: flex;
            justify-content: space-between;
            line-height: r(75);
            padding-left: r(28);
            padding-right: r(28);
            >li:nth-of-type(1){
                display: flex;
                align-items: center;
                >a{
                    height: r(31);
                    width: r(18);
                    >img{
                        height: r(31);
                        width: r(18);
                    }
                }
            }
            >li:nth-of-type(2){
                font-size: r(30);
                color: rgba(0,0,0,9);
            }
            >li:nth-of-type(3){
                >a{
                   font-size: r(24);
                   color: #343434;
                }
                 
                 
            }
        }
    }
    .content{
        padding-top: r(28);
        width: 100%;
        >.title{
            margin-bottom: r(23);
            >p:first-of-type{
                text-align: center;
                font-size: r(24);
                color: #bcbcbc;
                margin-bottom: r(16);
                >span{
                    font-size: r(20);
                }
            }
            >p:last-of-type{
                text-align: center;
                font-size: r(20);
                color: #bcbcbc;
            }
        }
        >.picture{
            >ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-right: r(16);
                padding-left: r(16);
                >li{
                    width: r(195);
                    height: r(195);
                    margin-bottom:r(9);
                    >p{
                        color: white;
                        font-size: r(24);
                        text-align: center;
                        line-height: r(195);
                    }
                }
                >li:nth-of-type(1){
                    background: url(../img/xingqubiaoqian1.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(2){
                    background: url(../img/xingqubiaoqian2.jpg);
                    background-size: contain;
                    position: relative;
                    >img{
                        position: absolute;
                        height: r(30);
                        width: r(30);
                        bottom: -3px;
                        right: -3px;
                    }
                }
                >li:nth-of-type(3){
                    background: url(../img/xingqubiaoqian3.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(4){
                    background: url(../img/xingqubiaoqian4.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(5){
                    background: url(../img/xingqubiaoqian5.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(6){
                    background: url(../img/xingqubiaoqian6.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(7){
                    background: url(../img/xingqubiaoqian7.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(8){
                    background: url(../img/xingqubiaoqian8.jpg);
                    background-size: contain;
                    >a{
                        height: 100%;
                        width: 100%;
                        >p{
                            color: white;
                            font-size: r(24);
                            text-align: center;
                            line-height: r(195);
                        }
                    }
                }
                >li:nth-of-type(9){
                    background: url(../img/xingqubiaoqian9.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(10){
                    background: url(../img/xingqubiaoqian10.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(11){
                    background: url(../img/xingqubiaoqian11.jpg);
                    background-size: contain;
                }
                >li:nth-of-type(12){
                    background: url(../img/xingqubiaoqian12.jpg);
                    background-size: contain;
                }
            }
        }
    }
}
